<!-- 歌单详情 头部 -->
<template>
	<div class="songslist-header">
		<img :src="img" alt="">
		<div class="songslist-header-right">
			<div class="songslist-header-right__title">
				<span>歌单</span>
				{{ infoList.name }}
			</div>
			<div class="songslist-header-right__creator">
				<img :src="creatorInfo.avatarUrl" alt="">
				<span>{{ creatorInfo.nickname }}</span>
				<div>{{ date }}</div>
			</div>
			<div class="songslist-header-right__play">
				<div class="playAll">
					<div @click="playAll">
						<caret-right-outlined />
						<span>播放全部</span>
					</div>
					<plus-outlined title="添加全部到播放列表" />
				</div>
				<div class="collection">
					<folder-add-outlined />
					收藏({{ count(infoList.subscribedCount) }})
				</div>
				<div class="collection">
					<select-outlined />
					分享({{ count(infoList.shareCount) }})
				</div>
				<div class="collection">
					<download-outlined />
					下载全部
				</div>
			</div>
			<div class="songslist-header-right__taps">
				<div class="taps-item">
					标签: 
					<span class="tap">{{ songListProps.songList.tags[0] }}</span> / <span class="tap">{{ songListProps.songList.tags[1] }}</span> / <span class="tap">{{ songListProps.songList.tags[2] }}</span>
				</div>
				<div class="taps-item">
					歌曲: <span style="margin-right: 1.5vw;">{{ count(infoList.trackCount) }}</span>  播放: <span>{{ count(infoList.playCount) }}</span>
				</div>
				<div class="taps-item">
					简介: <span :title="songListProps.songList.description">{{ songListProps.songList.description }}</span>
				</div>
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
import router from '@/router/index'
import { onMounted, ref } from 'vue';
import { CaretRightOutlined, PlusOutlined, FolderAddOutlined, SelectOutlined, DownloadOutlined } from '@ant-design/icons-vue';
import bus from '@/utils/bus'

const songListProps = defineProps(['songList'])
let infoList = ref<any>({})
let creatorInfo = ref({})
let date = ref('')
let img = ref('')
const getInfo = () => {
	img.value = router.currentRoute.value.query.img as string
	infoList.value = songListProps.songList
	creatorInfo.value = songListProps.songList.creator
	date.value = new Date(infoList.value.createTime).getFullYear() + '-' + new Date(infoList.value.createTime).getMonth() + '-' + new Date(infoList.value.createTime).getHours() + '创建'
	
}

const count = (num: number) => {
	if (num > 99999999) return Math.floor(num / 100000000) + '亿'
	else if (num > 9999) return Math.floor(num / 10000) + '万'
	else return num
}

const playAll = () => {
	bus.$emit('playall', 1)
}

onMounted(() => {
	getInfo()
})

</script>

<style lang="scss" scoped>
.songslist-header {
	height: 18vw;
	display: flex;
	box-sizing: content-box;
	flex-direction: row;
	justify-content: start;

	&>img {
		height: 18vw;
		width: 18vw;
		border-radius: 3%;
		margin-right: 2vw;
	}

	&-right {
		height: 100%;
		width: 100%;

		&__title {
			color: #D0D0D0;
			font-size: 1.8vw;
			font-weight: 900;
			display: flex;
			justify-content: start;
			align-items: center;

			&>span {
				font-size: 1vw;
				color: #EC4141;
				border: 1px solid #EC4141;
				border-radius: 5%;
				height: 1.5vw;
				line-height: 1.5vw;
				font-weight: 400;
				margin-right: 1vw;
				width: 2.5vw;
				text-align: center;
			}
		}

		&__creator {
			display: flex;
			flex-direction: row;
			justify-content: start;
			align-items: center;

			&>img {
				height: 3vw;
				width: 3vw;
				border-radius: 50%;
				cursor: pointer;
			}

			&>span {
				color: #23a7e0;
				padding: 1vw;
				font-size: 1.5vw;
				cursor: pointer;

				&:hover {
					color: #6EB9DA;
				}
			}

			&>div {
				color: #87877A;
				font-size: 1.5vw;
			}
		}

		&__play {
			display: flex;
			flex-direction: row;
			justify-content: start;
			align-items: center;

			.playAll {
				background-color: #EC4141;
				height: 2.8vw;
				width: 10vw;
				border-radius: 1.4vw;
				line-height: 2.8vw;
				text-align: center;
				display: flex;
				flex-direction: row;
				font-size: 1.2vw;
				color: #fff;
				cursor: pointer;

				&:hover {
					background-color: #D93F3F;
				}

				& > div {
					width: 75%;
					border-right: 1px solid #bbb;
				}

				& > .anticon {
					align-self: center;
					margin-left: 0.5vw;
				}
			}

			.collection {
				height: 2.5vw;
				width: 9vw;
				border: #bbb 1px solid;
				border-radius: 1.25vw;
				margin-left: 1vw;
				color: #D0D0D0;
				line-height: 2.2vw;
				text-align: center;
				font-size: 1.1vw;
				cursor: pointer;

				&:hover {
					background-color: #353535;
				}
			}
			
		}

		&__taps {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			margin-top: 1vw;
			color: #D0D0D0;

			.taps-item {
				font-size: 1.4vw;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				max-width: 30vw;
				line-height: 2.5vw;

				& > span {
				color: #878787;
			}

			.tap {
				color: #23a7e0;
				cursor: pointer;

				&:hover {
					color: #6EB9DA;
				}
			}
			}

		}
	}
}
</style>